<template>
  <div class="content">
    <div class="weui-tab">
      <div class="weui-tab__panel">
        <div class="bg-top">
          <div class="flex-auto top-sign">
            <div class>
              <div class="flex-left" style="margin-top: -15px">
                <div class="name">{{userInfo.nickName}}</div>
                <img class="img-logo" src="../common/static/imgs/icon-top.png" />
                <div class="department">所属部门</div>
              </div>
              <div class="flex-left">
                <div class="tag">{{userInfo.postName}}</div>
                <img class="line" src="../common/static/imgs/line.png" />
                <div class="tag">{{userInfo.deptName}}</div>
              </div>
            </div>
            <img class="top-right-img" src="../common/static/imgs/top-title-img.png" />
          </div>

          <div class="flex-auto topcenter">
            <div class>
              <div class="big-title">欢迎来到</div>
              <div class="sm-title">调研信息共享系统</div>
            </div>
            <!-- <img class="top-logo" src="../common/static/imgs/top-logo.png"/> -->
          </div>
          <div class="search">
            <div class="weui-cell__bd">
              <input
                id="input1"
                v-model="researchName"
                class="weui-input"
                type="text"
                placeholder="请输入搜索内容"
                @blur="feachlist"
                @keydown.enter="feachlist"
              />
            </div>
            <!-- <div class="weui-cell__ft">
              <i id="inputclear1" class="weui-icon-clear"></i>
            </div>-->
            <!-- <u-search :show-action="false"  input-align="left" height="58" @search="search"></u-search> -->
          </div>

          <div class="flex-auto list-box">
            <div class="flex-left">
              <img class="icon" src="../common/static/imgs/icon.png" />
              <div class="title">近期调研信息</div>
            </div>
            <div class="flex-left" @click="goRecentList">
              <div class="more-text">更多</div>
              <img class="more" src="../common/static/imgs/more.png" />
            </div>
          </div>

          <div class="flex-auto list-item" v-for="(item,index) in rowlist" :key="index">
            <div class>
              <div class="title">{{item.researchName}}</div>
              <div class="flex-left mt12">
                <!-- <img class="position" src="../common/static/imgs/position.png" />
                <div class="sm-title">北京</div>-->
                <img class="house" src="../common/static/imgs/house.png" />
                <div class="sm-title">{{item.researchPlace}}</div>
              </div>
            </div>

            <div class="see flex-center" @click="onGodeil(item.id)">
              查看
              <div class="right-bg">
                <img class="right" src="../common/static/imgs/right-logo.png" />
              </div>
            </div>
          </div>

          <div class="flex-auto list-box mt32">
            <div class="flex-left">
              <img class="icon" src="../common/static/imgs/icon.png" />
              <div class="title">模板文件下载</div>
            </div>
          </div>
          <div class="onload mt32">
            <div class="onloadbg-box">
              <div class="onloadbg bg1" @click="cdownloadTask('1')">
                <div class="title">研究院基本情况介绍</div>
                <div class="number">{{loadlist[0]&&loadlist[0].downloadCount}}次</div>
                <div v-if="filePath1" class="btn" @click="open(filePath1)">打开</div>
                <div v-else class="btn">立即下载</div>
              </div>
              <div class="onloadbg bg2" @click="cdownloadTask('2')">
                <div class="title">议程单模板</div>
                <div class="number">{{loadlist[0]&&loadlist[1].downloadCount}}次</div>
                <div v-if="filePath2" class="btn" @click="open(filePath2)">打开</div>
                <div v-else class="btn">立即下载</div>
              </div>
              <div class="onloadbg bg3" @click="cdownloadTask('3')">
                <div class="title">调研座谈行程安排</div>
                <div class="number">{{loadlist[0]&&loadlist[2].downloadCount}}次</div>
                <div v-if="filePath3" class="btn" @click="open(filePath3)">打开</div>
                <div v-else class="btn">立即下载</div>
              </div>
              <div class="onloadbg bg4" @click="cdownloadTask('4')">
                <div class="title">调研函模板</div>
                <div class="number">{{loadlist[0]&&loadlist[3].downloadCount}}次</div>
                <div v-if="filePath4" class="btn" @click="open(filePath4)">打开</div>
                <div v-else class="btn">立即下载</div>
              </div>
            </div>
          </div>
          <div class="flex-auto list-box mt32">
            <div class="flex-left">
              <img class="icon" src="../common/static/imgs/icon.png" />
              <div class="title">调研准备工作提示</div>
            </div>
          </div>

          <div class="tip mt32">
            <div class="tip-box">
              <div style="tip-box-img">
                <img class="tip-img" :src="list[0].img" />
              </div>
              <div
                class="title"
                v-for="(item, index) in list"
                :key="index"
              >{{index+1}}.{{ item.title }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="weui-tabbar">
        <a href="javascript:;" class="weui-tabbar__item weui-bar__item_on">
          <span style="display: inline-block; position:relative;bottom:0">
            <!-- <i class="icon-tab icon-tab-messageCurrent"></i> -->
            <img class="icon-tab-messageCurrent" src="../common/static/imgs/homeactive.png" />
          </span>
          <p class="weui-tabbar__label">首页</p>
        </a>
        <a href="javascript:;" @click="viewAdd" class="weui-tabbar__item">
          <!-- <i class="icon-tab icon-tab-email"></i> -->
          <img class="icon-tab-messageCurrent" src="../common/static/imgs/add.png" />
          <p class="weui-tabbar__label">新增</p>
        </a>
        <a href="javascript:;" @click="viewMine" class="weui-tabbar__item">
          <span style="display: inline-block; position:relative;">
            <img class="icon-tab-messageCurrent" src="../common/static/imgs/me.png" />
          </span>
          <p class="weui-tabbar__label">我的</p>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
import datas from '../mock/home/jsonData';
import i18n from '../i18n';
import one from '../common/static/imgs/one.png';
import two from '../common/static/imgs/two.png';
import three from '../common/static/imgs/three.png';
import four from '../common/static/imgs/four.png';
import five from '../common/static/imgs/five.png';
import six from '../common/static/imgs/six.png';

import {
  getBasicByCode,
  getlist,
  getresearchTemplate
} from '../config/api/api';
import { mapState } from 'vuex';
export default {
  data() {
    return {
      rowlist: [],
      userInfo: {},
      researchName: '',
      openfilePath: '',
      error: '',
      list: [
        {
          img: one,
          title: '与对方联系人确认时间和行程安排获得调研点准确位置'
        },
        {
          img: two,
          title: '预定车辆，提前联系司机'
        },
        {
          img: three,
          title: '提前准备宣传册、PPT介绍研究院视频宣传片如有必要准备文创礼品'
        },
        {
          img: four,
          title: '通知调研人员全员'
        },
        {
          img: five,
          title:
            '提前整理调研需求如有交流座谈，是否提前准备议程单或者简单交流内容'
        },
        {
          img: six,
          title: '如遇特殊天气提前确认高速畅通'
        }
      ],
      loadlist: [],
      filePath1: '',
      filePath2: '',
      filePath3: '',
      filePath4: ''
    };
  },
  created() {
    window.HWH5.setNavigationBarTitle({ title: '调研信息共享系统' });
    this.getCode();
  },
  computed: {
    // ...mapState({
    //   userInfo: state => state.userInfo
    // })
  },
    mounted() {
    // new Mdate("dateSelectorOne");
    let _this = this;
    let mask = document.getElementsByClassName('weui-mask')[0];
    let picker = document.getElementsByClassName('weui-picker')[0];
    if (mask && picker) {
      var btn = document.getElementsByClassName('weui-picker__action')[0];
      var e = document.createEvent('MouseEvents');
      e.initEvent('click', true, true);
      console.log(btn.dispatchEvent(e));
      btn.dispatchEvent(e);
    }
  },
  methods: {
    onGodeil(id) {
      this.$router.push({ path: '/add', query: { keyword: 'see', id } });
    },
    open(url) {
      HWH5.openFile({ filePath: url })
        .then(data => {
          console.log(data);
        })
        .catch(error => {
          console.log('打开文档失败', error);
        });
    },
    // 使用 HWH5.downloadFileOperation 方法下载文件
    cdownloadTask(type) {
      let data = {
        type
      };
      getresearchTemplate(data)
        .then(res => {
          const timestamp = new Date().getTime();
          const fileType = this.getFileTypeByUrl(res.data[0].fileUrl);

          const filePath = `/download/myFile_${timestamp}.${fileType}`;
          if (type == 1) {
            this.filePath1 = filePath;
          } else if (type == 2) {
            this.filePath2 = filePath;
          } else if (type == 3) {
            this.filePath3 = filePath;
          } else if (type == 4) {
            this.filePath4 = filePath;
          }
          // this.filePath = filePath;
          HWH5.downloadFile({
            // url:'http://111.56.172.130:19000/srms/2025/09/11/调研函模板_20250911120834A001.docx',
            url: res.data[0].fileUrl,
            headers: {},
            filePath: filePath
          })
            .then(result => {
              // this.openfilePath = true;
              console.log(result);
            })
            .catch(error => {
              this.error = error;
              console.log('下载异常', error);
            });
        })
        .catch(error => {
          console.error(error);
        });
    },

    /**
     * 通过URL解析文件扩展名判断类型
     * @param {string} url 文件URL
     * @returns {string} 文件类型（pdf/doc/docx/unknown）
     */
    getFileTypeByUrl(url) {
      // 使用split方法将URL按'/'分割成数组，并取最后一个元素（即文件名）
      // const fileName = url.split('/').pop();
      // 再次使用split方法将文件名按'.'分割成数组，并取最后一个元素（即文件后缀名）
      const extension = url.split('.').pop();
      return extension;
    },

    viewAdd() {
      this.$router.push('/add');
    },
    goRecentList() {
      this.$router.push('/recentList');
    },

    viewMine() {
      this.$router.push('/mine');
    },
    onfil() {
      HWH5.uploadFile({
        serverUrl: serverUrl,
        filePath: filePath,
        name: 'file', // 根据服务器端要求命名，例如 'file', 'avatar' 等
        formData: {
          // 附加的表单数据
          user: 'testUser',
          extraInfo: 'someData'
        },
        headers: {
          'Custom-Header': 'someValue'
        },
        timeout: 60000, // 60秒超时
        zip: false, // 不压缩上传
        progress: 1, // 需要返回上传进度
        onProgress: progressData => {
          // progressData 中通常包含 progress (进度百分比), totalBytesSent, totalBytesExpectedToSend 等信息
          console.log('上传进度:', progressData.progress + '%');
        }
      })
        .then(response => {
          // 上传成功
          // 注意：response 是服务器返回的数据，格式取决于你的服务器接口实现
          console.log('上传成功，服务器返回值:', response);
          // 尝试将返回的字符串解析为JSON对象（如果服务器返回的是JSON字符串）
          try {
            const data = JSON.parse(response);
            console.log('解析后的数据:', data);
          } catch (e) {
            console.log('服务器返回数据非JSON格式或解析失败:', response);
          }
        })
        .catch(error => {
          // 上传失败
          console.error('上传文件失败:', error);
        });
    },
    // 查看子项目
    divChildren(item) {
      switch (item.type) {
        // 考勤
        case 'attendance':
          this.$router.push('/checking');
          break;
        //薪酬
        case 'salary':
          HWH5.openWebdiv({
            uri: 'h5://20200629151916566393288/html/index.html'
          }).catch(error => {
            console.log(error);
          });
          break;
        // 出差报销
        case 'businessTrip':
          this.$router.push('/businessTrip');
          break;
        //服务热线
        case 'serviceHotline':
          this.$router.push('/serveHotLine');
          break;
        //电脑报修
        case 'computerInstallation':
          this.$router.push('/computerInstallation');
          break;
      }
    },
    // 服务指南
    Servedirection(item) {
      switch (item.type) {
        case 'computerInstallation':
          this.$router.push('/computerInstallation');
          break;
        case 'campusIntroduce':
          this.$router.push('/campusIntroduce');
          break;
        case 'employee':
          this.$router.push('/employee');
          break;
        case 'recepteVisitor':
          this.$router.push('/recepteVisitor');
          break;
      }
    },
    // 公司介绍
    divCompany() {
      this.$router.push('/company');
    },
    // 公司制度
    divRules() {
      this.$router.push('/companyRule');
    },
    // 获取免登码
    async getCode() {
      try {
        HWH5.showLoading();
        const userInfo = await HWH5.getAuthCode();
        console.log('code', userInfo.code);
        //  将免登码传进去作为获取用户信息的参数
        this.getUserInfo(userInfo.code);
        HWH5.hideLoading();
      } catch (error) {
        console.log(error);
      }
    },
    //通过免登码获取用户信息
    getUserInfo(code) {
      let data = {
        code
      };
      HWH5.showLoading();
      getBasicByCode(data)
        .then(res => {
          HWH5.hideLoading();
          this.$store.commit('SAVE_USERINFO', res);
          HWH5.setStorage({
            key: 'userInfo',
            data: res
          }).catch(error => {
            console.log('设置缓存异常', error);
          });
          this.userInfo = res;
          // console.log(this.$store.state.userInfo,'00000000099')
          // this.$store.state.userInfo
          this.feachlist(); //获取调研列表
          this.onloadcount(); //获取下载次数接口
        })
        .catch(error => {
          console.error(error);
        });
    },
    onloadcount() {
      let data = {
        type: ''
      };
      HWH5.showLoading();
      getresearchTemplate(data)
        .then(res => {
          HWH5.hideLoading();
          this.loadlist = res.data;
          // const timestamp = new Date().getTime();
          // const filePath = `/download/myFile_${timestamp}.docx`;
          // this.filePath = filePath;
          // HWH5.downloadFile({
          //   url:'http://111.56.172.130:19000/srms/2025/09/11/调研函模板_20250911120834A001.docx',
          //   headers: {},
          //   filePath: filePath
          // })
          //   .then(result => {
          //     this.openfilePath = true;
          //     console.log(result);
          //   })
          //   .catch(error => {
          //     this.error = error;
          //     console.log('下载异常', error);
          //   });
        })
        .catch(error => {
          console.error(error);
        });
    },

    feachlist() {
      let data = {
        checkStatus: 1,
        isApp: 1,
        pageNumber: 1,
        pageSize: 5,
        researchName: this.researchName
      };
      HWH5.showLoading();
      getlist(data)
        .then(res => {
          HWH5.hideLoading();

          this.rowlist = res.rows;
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};
</script>

<style lang="less" scoped>
.content {
  background: #f4f8f9;
  .weui-tabbar__label {
    color: #3d3d3d;
  }
}
.weui-tab__panel {
  height: 100vh;
}
.weui-tabbar__item {
  height: 55px;
}
.icon-tab-messageCurrent {
  width: 21px;
  height: 24px;
}
.bg-top {
  padding-bottom: 100px;
  padding-left: 16px;
  padding-right: 16px;
  background: url('../common/static/imgs/topbg.png') no-repeat;
  background-size: 100% 100%;
  // background-position: center top -50px; /* 向上移动50px */
  // width: 100vw;
  height: 202px;

  background-color: #f4f8f9;
  // margin-top: -8px;

  .top-sign {
    background: url('../common/static/imgs/top-title.png') no-repeat;
    width: 270px;
    height: 55px;
    background-size: cover;
    margin: auto;
    padding-top: 16px;
    padding-right: 30px;
    padding-left: 30px;
    .name {
      font-family: Source Han Sans;
      font-size: 12px;
      font-weight: bold;
      line-height: normal;
      letter-spacing: 0em;
    }
    .department {
      background: #82afff;
      border-radius: 4px;
      color: #fff;
      padding: 3px 5px;
      font-size: 12px;
    }
    .tag {
      // font-variation-settings: "opsz" auto;
      // font-feature-settings: "kern" on;
      font-size: 12px;
      color: #666666;
    }
    .line {
      width: 1px;
      height: 12px;
      margin-left: 5px;
      margin-right: 5px;
    }
    .img-logo {
      margin-left: 7px;
      margin-right: 7px;
      width: 12px;
      height: 12px;
    }
    .top-right-img {
      width: 41.11px;
      height: 39.01px;
    }
  }

  .topcenter {
    padding-left: 5px;
    margin-top: 46px;
    .top-logo {
      width: 348px;
      height: 348px;
    }
    .big-title {
      font-family: Source Han Sans;
      font-size: 28px;
      font-weight: bold;
      line-height: normal;
      letter-spacing: 0em;
      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #333333;
    }
    .sm-title {
      font-family: Source Han Sans;
      font-size: 20px;
      font-weight: bold;
      line-height: normal;
      letter-spacing: 0em;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #333333;
    }
  }
  .search {
    box-shadow: 0px 8px 20px 0px #dce7f1;
    background: url('../common/static/imgs/searchbg.png') no-repeat;
    background-size: 100% 100%;
    height: 64px;
    border-radius: 20px;
    margin-top: 30px;

    .weui-input {
      line-height: 58px !important;
      width: 90%;
      font-size: 14px;
      height: 56px;
      padding-left: 20px;
    }
    ::v-deep {
      .u-content {
        border: none !important;
        background: #f3f9ff !important;
      }
      .u-input {
        background: #f3f9ff !important;
      }
    }
    margin-bottom: 6px;
  }

  .list-box {
    width: 100%;
    .title {
      font-family: Source Han Sans;
      font-size: 16px;
      font-weight: 800;
      line-height: normal;
      letter-spacing: 0em;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #333333;
    }
    .icon {
      width: 4px;
      height: 14px;
      margin-right: 5px;
    }
    .more-text {
      font-family: Source Han Sans;
      font-size: 12px;
      font-weight: normal;
      line-height: normal;
      text-align: right;
      letter-spacing: 0em;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #999999;
    }
    .more {
      width: 8px;
      height: 8px;
      margin-left: 5px;
    }
  }
  .list-item {
    background-color: #fff;
    padding: 12px;
    border-radius: 4px;
    margin-top: 16px;
    .position {
      height: 10px;
      width: 9px;
      margin-right: 5px;
    }
    .house {
      width: 10px;
      height: 9px;
      margin-right: 5px;
    }
    .title {
      font-family: Source Han Sans;
      font-size: 14px;
      font-weight: 700;
      width: 200px;
      line-height: normal;
      letter-spacing: 0em;
      word-break: break-all;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #333333;
    }
    .sm-title {
      font-family: Source Han Sans;
      font-size: 11px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0em;
      width: 200px;
      word-break: break-all;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #999999;
    }
    .see {
      width: 80px;
      height: 32px;
      font-size: 14px;
      border-radius: 8px;
      background: #f2f1ff;
      color: #5456e5;
      height: 32px;
      text-align: center;
      .right-bg {
        width: 12px;
        height: 24px;
        border-radius: 2px;
        background: rgba(214, 218, 226, 0.3);
        margin-left: 10px;
        display: flex;
        align-items: center;
      }
      .right {
        width: 6px;
        height: 12px;
        margin: auto;
      }
    }
  }
  .onloadbg-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .bg1 {
      background-image: url('../common/static/imgs/pinkbg.png');
      background-size: 100% 100%;
      width: 45%;
      height: 95px;
      padding: 4px;
      margin: 3px;
    }

    .bg2 {
      background-image: url('../common/static/imgs/blue.png');
      background-size: 100% 100%;
      width: 45%;
      height: 95px;
      padding: 4px;
      margin: 3px;
    }
    .bg3 {
      background-image: url('../common/static/imgs/bg3.png');
      background-size: 100% 100%;
      width: 45%;
      height: 95px;
      padding: 4px;
      margin: 3px;
    }
    .bg4 {
      background-image: url('../common/static/imgs/bg4.png');
      background-size: 100% 100%;
      width: 45%;
      height: 95px;
      padding: 4px;
      margin: 3px;
    }
  }
  .onloadbg {
    .title {
      font-family: AlibabaPuHuiTi;
      font-size: 13px;
      font-weight: 700;
      line-height: normal;
      letter-spacing: 0em;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #333333;
    }
    .number {
      font-family: Source Han Sans;
      font-size: 11px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0em;
      color: rgba(102, 102, 102, 0.9);
      margin-top: 2px;
      margin-bottom: 13px;
    }
    .btn {
      width: 73px;
      height: 12px;
      border-radius: 24px;
      line-height: 12px;
      background: rgba(255, 255, 255, 0.59);
      box-shadow: inset 0px 8px 20px 0px #ffffff;
      font-family: AlibabaPuHuiTi;
      font-size: 12px;
      font-weight: 500;
      text-align: center;
      letter-spacing: 0em;
      padding: 12px 4px;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #333333;
    }
  }

  .tip {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 50px;

    .tip-box {
      background: url('../common/static/imgs/bo.png');
      background-size: 100% 100%;
      width: 100%;
      text-align: center;

      background-color: #fff;
      margin-bottom: 10px;
      padding: 5px;
      margin-bottom: 50px;
    }
    .tip-box-img {
      width: 100%;
      text-align: center;
    }
    .tip-img {
      width: 42px;
      height: 36px;
      margin: auto;
      text-align: center;
    }
    .title {
      text-align: left;
      width: 90%;
      margin: auto;
      font-family: Source Han Sans;
      font-size: 13px;
      font-weight: normal;
      line-height: normal;
      letter-spacing: 0em;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      color: #666666;
      margin-top: 8px;

    }
  }
}
</style>